<template>
    <div class="box">
        <div class="box-li">
            <syxTree :defaultProps="{
                children: 'children',
                label: 'label'
            }" :data="f"></syxTree>
        </div>

        <div class="box-li">
            <syx-calendar :data="data1" :date="date1" @handleClickDate="handleClickDate">

                <template #header="{ date }">
                    <div style="height:40px;line-height:40px;background:skyblue;text-align:center">
                        <span>
                            {{ date }}
                        </span>
                        <span @click="(date1 = new Date('2022-8-1'))">点击我切换日期</span>
                    </div>
                </template>

                <template #dayItem="{ item }">
                    <div class="date-item" :class="{ 'Low': item.status == 0 }">
                        <div>
                            {{ item.day }}
                        </div>
                        <div>
                            {{ (item.detail && item.detail.text) }}
                        </div>
                    </div>
                </template>
            </syx-calendar>
        </div>

        <div class="box-li">
            <syx-week-calendar :date="date2" @handleClickWeek="handleClickWeek">
                <template #weekItem="{ item }">
                    <div>
                        <div>
                            {{ item.date }}日
                        </div>
                        <div>
                            星期{{ item.day }}
                        </div>
                    </div>
                </template>
            </syx-week-calendar>
        </div>
    </div>
</template>
<script>
import syxCalendar from './syxCalendar/index.vue';
import syxWeekCalendar from './syxWeekCalendar/index.vue';
export default {
    name: 'demo',
    components: {
        syxCalendar, syxWeekCalendar
    },
    data() {
        return {
            f: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                    }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }],

            data1: [
                { date: '2022-12-05', text: '世界很美好感谢有你' }
            ],
            date1: new Date(),
            date2: new Date()
        }
    },
    methods: {
        handleClickDate(item) {
            console.log(item);
        },
        handleClickWeek(item) {
            console.log(item);
        }
    }
};
</script>
<style scoped>
.box {
    width: 100%;
    display: block;
}

.box-li {
    width: 100%;
    margin-top: 20px;
}


.date-item.Low {
    width: 100%;
    height: 100%;
    opacity: .5;
}
</style>
